<template>
  <div class="auto">
    <validator name='v'>
      <form class="form-horizontal">
        <p class="bg-info text-center" style="padding: 8px;">补气信息</p>
        <!-- <div class="row" style="margin-top:10px;">
          <label for="f_lastremain_fillgas" class=" col-sm-2 control-label">上次剩余补气量:</label>
          <span class="col-sm-2 form-control-static">{{model.f_lastremain_fillgas}}</span>
          <label for="f_theremain_fillgas" class=" col-sm-2 control-label">本次剩余补气量:</label>
          <span class="col-sm-2 form-control-static">{{model.f_theremain_fillgas}}</span>
        </div> -->
        <div class="row" style="margin-top:10px;">
          <label v-if='row.f_meter_type==="气量卡表"' for="f_fillgas" class=" col-sm-2 control-label" >补气量:</label>
          <div class="col-sm-2" v-if='row.f_meter_type==="气量卡表"'>
            <input class="form-control" type="text" v-model="model.f_fillgas"
            v-validate:f_pregas='{required: true }'  placeholder="补气量">
          </div>
          <label v-if='row.f_meter_type==="金额卡表"' for="f_fillgas" class=" col-sm-2 control-label" >补气金额:</label>
          <div class="col-sm-2" v-if='row.f_meter_type==="金额卡表"'>
            <input class="form-control" type="text" v-model="model.f_fillamount"
            v-validate:f_pregas='{required: true }'  placeholder="补气金额">
          </div>
          <label for="f_reason" class=" col-sm-2 control-label" >补气原因:</label>
          <div class="form-group col-sm-2 ">
            <v-select id="f_reason"
            v-model="model.f_reason"
            placeholder='补气原因'
            :value.sync="model.f_reason"
            :options='reason'
            close-on-select ></v-select>
          </div>
        </div>

        <div class="row" style="margin-top:10px;" v-if="model.f_reason[0] ==='其他'">
          <!-- <label for="f_reason" class=" col-sm-2 control-label" >补气原因:</label> -->
          <div class="col-sm-offset-2 col-sm-8">
            <textarea class="form-control" rows="3" v-model="model.f_othereason" placeholder="请填写补气原因"></textarea>
          </div>
        </div>
      </form>
      <div style="text-align:right;height:auto;margin-top:80px;margin-right:50px;">
        <button class="btn btn-success" @click="confirm()"  :disabled='!$v.valid'>确&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;认</button>
        <button class="btn btn-default" @click="clean()" style="width:80px;margin-left:20px;">取&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;消</button>
      </div>
    </validator>
  </div>
</template>
<script>
import AppData from '../../../../../stores/AppData'
export default {
  title: '掉气补气',
  data () {
    return {
      model: {
        f_fillgas: '',
        f_lastremain_fillgas: '',
        f_fillamount: '',
        f_theremain_fillgas: '',
        f_reason: '掉气补气',
        f_othereason: '',
        f_meter_brand: '',
        f_card_id: ''
      }
    }
  },
  props: ['row'],
  ready () {
    this.model.f_user_id = this.row.f_user_id
    this.model.f_userinfo_id = this.row.f_userinfo_id
    this.model.f_card_id = this.row.f_card_id
  },
  watch: {
    'row' (val) {
      this.model.f_user_id = val.f_user_id
      this.model.f_userinfo_id = val.f_userinfo_id
      this.model.f_card_id = val.f_card_id
      this.model.f_meter_brand = val.f_meter_brand
      let data = {
        items: '*',
        tablename: 't_sellinggas',
        condition: 'f_user_id=' + "'" + this.model.f_user_id + "'" + 'and f_userinfo_id=' + "'" + this.model.f_userinfo_id + "'" + 'and (f_charge_type=' + "'" + '卡表收费' + "'" + 'or f_charge_type=' + "'" + '发卡售气' + "')",
        orderitem: 'f_delivery_date desc'
      }
      this.$SqlService.singleTableOrderBy(data).then((res) => {
        console.log('看下吧返回的是什么：' + JSON.stringify(res))
        this.model.f_fillgas = res.data[0].f_pregas
        this.model.f_fillamount = res.data[0].f_preamount
        this.model.f_lastremain_fillgas = this.model.f_fillgas
        this.model.f_theremain_fillgas = this.model.f_lastremain_fillgas - this.model.f_fillgas
      }).catch((error) => {
        this.$dispatch('error', '掉气补气', this.row, error)
      })
    }
  },
  methods: {
    confirm () {
      this.$OffGasAddGasService.offGasAddGas(this.model, this.row).then((res) => {
        this.$dispatch('success', '掉气补气', this.row, res)
      }).catch((error) => {
        if (error.status === 603) {
          this.$error('重复提交')
          return
        }
        this.$dispatch('error', '掉气补气', this.row, error)
      })
    },
    clean () {
      this.$dispatch('clean', this.row)
    }
  },
  computed: {
    reason () {
      return AppData.getParam('补气原因')
    }
  }
}
</script>

<style>
</style>
